<style scoped>
  .chart {
    width: 100%;
    float: left;
  }


  /*.chart div {
        height: 400px;
        float: left;
    }*/

  .Col {
    padding: 30px 20px;
  }

  .blist {
    /*background-color: #d1e4e8;*/
    /*height: 200px;*/
    cursor: pointer;
    color: #6eceac;
  }

  .userlist {
    padding-left: 30%;
    float: right;
    color: #6eceac;
  }

  .ecard {
    height: 300px;
    margin-bottom: 10px;
    /*margin-right: 10px;*/
  }

  .hcard {
    height: 610px;
    margin-left: 20px;
  }

  .p-img {
    width: 100%;
    /*height: 60px;*/
    line-height: 60px;
    float: right;
    margin-top: -50px;
  }

  .p-img img {
    border-radius: 20px;
    /*margin: 10px 0px 10px 10px;*/
    width: 20px;
    height: 20px;
    float: right;
  }
</style>

<template>
  <div class="layout-content-body">
    <Row>
      <Col :span="12">
        <Card class="ecard">
          <p slot="title">
            {{ userInfo.Title }}
          </p>
          <span class="p-img">
          <img :src="imgUrl">
        </span>
          <ul>
            <li>姓名:
              <span class="userlist">{{ userInfo.Title }}</span>
            </li>
            <li>账号:
              <span class="userlist">{{ userInfo.Name }}</span>
            </li>
            <li>角色:
              <span class="userlist">{{ state.role.Name }}</span>
            </li>
            <li>单位:
              <span class="userlist">{{ state.org.Name }}</span>
            </li>
            <li>部门:
              <span class="userlist">{{ state.dept.Name }}</span>
            </li>
            <!-- <li>职业:
              <span class="userlist">{{userInfo.Expert}}</span>
            </li> -->
            <li>岗位:
              <span class="userlist">{{ userInfo.Job }}</span>
            </li>
            <li>电话:
              <span class="userlist">{{ userInfo.Phone }}</span>
            </li>
            <li>邮件:
              <span class="userlist">{{ userInfo.Email }}</span>
            </li>
            <li>上次活动时间:
              <span class="userlist">{{ userInfo.Logintime }}</span>
            </li>
            <li>上次活动ip:
              <span class="userlist">{{ userInfo.Loginip }}</span>
            </li>
          </ul>
        </Card>
        <Card class="ecard">
          <p slot="title">
            公告
          </p>
          <ul>
            <li
              v-for="item in bulletins"
              :key="item.Id"
              class="blist"
              @click="show(item)"
            >
              <Icon
                type="information-circled"
                style="color: red"
              />
              &nbsp;&nbsp;&nbsp;&nbsp;{{ item.Title }} {{ item.Utime.slice(0,10) }}
            </li>
          </ul>
        </Card>
      </Col>
      <Col :span="12">
        <!-- <Card class="hcard">
            <p slot="title">
              观看历史
            </p>
            <Timeline class="hisLine" pending>
              <Timeline-item v-for="item in getHistorys" :key="item.Id">
                <p class="time">{{item.Ctime.slice(0,10)}}</p>
                <p class="content">{{item.VideoName}}&nbsp&nbsp观看时长:{{item.LookLong}}秒</p>
              </Timeline-item>
              <Timeline-item>
                <router-link to="/history">查看更多</router-link>
              </Timeline-item>
            </Timeline> -->
        </Card>
      </Col>
    </Row>
    <!-- <Row style="background:#eee;padding:20px;" v-if="role.Type<2">
      <Col :span="12">
      <Card>
        <chart :options="liveOptions"></chart>
      </Card>
      </Col>
      <Col :span="12">
      <Card>
        <chart :options="videoOptions"></chart>
      </Card>
      </Col>

    </Row> -->
    <Modal
      v-model="showModel"
      title="公告"
      width="900"
      style=" height:400px;"
    >
      <div v-html="bulletin.Content" />
    </Modal>

  </div>
</template>

<script>
    import echarts from 'echarts';
    import {
        CPT_ROOT,
        V_ROOT
    } from '@/api/config';
    import api from '@/api';
    import {
        mapActions,
        mapState,
        mapMutations
    } from 'vuex';
    export default {
        data () {
            return {
                value: 0,
                bulletins: [],
                showModel: false,
                bulletin: {}
            };
        },
        computed: {
            // ...mapState(['isLogin', 'org', 'userInfo', 'dept', 'role']),
            userInfo () {
                return this.$store.state.app.userInfo;
            },
            state () {
                return this.$store.state.app;
            },
            imgUrl () {
                if (!this.userInfo.Photo) {
                    return '/static/default.jpg';
                } else {
                    return V_ROOT + '/' + this.userInfo.Photo;
                }
            }
        },
        mounted: function () {
            this.getBulletin();

            // setTimeout(() => {
            //   this.welcom()
            // }, 1000);
        },
        methods: {
            // ...mapMutations(['SET_MSG']),
            // welcom(){
            //   if (this.isLogin) {
            //     this.$Notice.success({
            //       top: 100,
            //       title: '欢迎' + this.userInfo.Title + '登陆系统',
            //       desc: '祝您有美好的一天！'
            //     });
            //   }
            // },

            getBulletin () {
                this.spinShow = true;
                this.$api.getMyBulletin().then(res => {
                    if (!res.error) {
                        this.bulletins = res.Data;
                    } else {
                        this.$Message.error(res.message);
                    }
                });
                setTimeout(() => {
                    this.spinShow = false;
                }, 300);
            },

            show (data) {
                this.bulletin = data;
                this.showModel = true;
            }
        }

    };
</script>
